<template>
  <!--  xs	<768px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—-->
  <!--  sm	≥768px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—-->
  <!--  md	≥992px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—-->
  <!--  lg	≥1200px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—-->
  <!--  xl	≥1920px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—-->
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-form-item label="商品编号" prop="pid">
          <el-input v-model="ruleForm.pid"></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="商品分类" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择活动区域">
            <el-option label="电子产品" value="shanghai"></el-option>
            <el-option label="消费类" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="4">
        <el-form-item label="入库数量" prop="stock">
          <el-input v-model="ruleForm.stock"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="8" :md="6" :lg="4" :xl="3">
        <el-form-item label="折扣" prop="discount">
          <el-input v-model="ruleForm.discount"></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="8" :md="6" :lg="4" :xl="3">
        <el-form-item label="会员折扣" prop="vipDiscount">
          <el-input v-model="ruleForm.vipDiscount"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">入库</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>

  </el-form>
</template>
<script>
  export default {
    name: "AddProduct",
    data() {
      const validatePid = (rule, value, callback) => {
        const discountReg = /(^69[0-9]{11}$)/;
        // console.log(Number.isInteger(+value))
        if (!discountReg.test(value)) {
          callback(new Error('请检查编号是否以9开头切为13位！'));
        }
        callback();
      };
      const validateDiscount = (rule, value, callback) => {
        const discountReg = /(^0\.[1-9]+)|(^1$)/;
        // console.log(Number.isInteger(+value))
        if (!discountReg.test(value)) {
          callback(new Error('请检查数值是否在0.1到1之间'));
        }
        callback();
      };
      const validateNumber = (rule, value, callback) => {
        const discountReg = /(^[0-9]+$)/;
        // console.log(Number.isInteger(+value))
        if (!discountReg.test(value)) {
          callback(new Error('请检查数据是否为整数'));
        }
        callback();
      };
      return {
        ruleForm: {
          pid: '',
          name: '',
          type: '',
          stock: '1',
          discount: '1',
          vipDiscount: '1',
        },
        rules: {
          pid: [
            {required: true, message: '请输入商品编号', trigger: 'blur'},
            {validator: validatePid, trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入商品名称', trigger: 'change'}
          ],
          type: [
            {required: true, message: '请选择商品类型', trigger: 'change'}
          ],
          stock: [
            {required: true, message: '请输入入库数量', trigger: 'change'},
            {validator: validateNumber, trigger: 'change'}
          ],
          discount: [
            {validator: validateDiscount, required: true, trigger: 'change'}
          ],
          vipDiscount: [
            {validator: validateDiscount, required: true, trigger: 'change'}
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.Host + '/products/add',
              method: 'POST',
              data: {
                pid: this.ruleForm.pid,
                name: this.ruleForm.name,
                type: this.ruleForm.type,
                discount: this.ruleForm.discount,
                vipDiscount: this.ruleForm.vipDiscount,
                stock: this.ruleForm.stock
              }
            }).then(result => {
              console.log(result.data.message === 'success')
              if (result.data.message === 'success') {
                console.log("dfsd")
                this.$message({
                  message: '添加成功！',
                  type: 'success'
                });
                // that.$router.push({path: '/'})
              }
            }).catch(error => {
              this.$message.error('添加失败！');
            })
          } else {
            this.$message.error('添加失败！');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
